<!--
* @Description RotateAnimationIndex 轮播动画
* @author 三咲问道
* @date 2025/8/5
-->
<template>
  <div class="container">
    <div class="content">
      <div class="info">
        你好,放档案塔提供的as547导服费确认退64ggfjr675热热
        佛挡杀佛哦及今年哦工地为一位护肤热牛的放档案塔提供的as547导
        佛挡杀佛哦及今年哦工地为一位护肤热牛的放档案塔提供的as547导
      </div>
    </div>

    <div class="list-content">
      <div class="scroll-list">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>

        <!--   补全列表   -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
      </div>
    </div>

<!--
  问题点:
  1,用什么方式实现无限轮播
  这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理？
  在列表的最后添加列表开头的重复项即可(如图中的10后面出现的1,2,3,4,5既为重复项)。
  重复项添加的数目要根据当前列表的高度和列表项的高度一起确定，例如：
  列表高度，则需要在当前列表尾部添加  150 / 30 = 5 项重复项才可以去除留白。

  2,如何让用户无感知的切换回第一项
  添加好重复项之后控制好切换时机，当列表滚动到最后一项的末尾(重复项第一项的开头)时，立即进行切换。例如：
  列表项共 10 项，则让列表向上移动到 10 * 30px = 300px 时立即进行切换即可实现无感知切换

-->

  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.container {
  @keyframes rotateMove {
    from{
      left: 50%;
    }
    to{
      left: -50%;
    }
  }
  .content {
    border: 1px solid #9bbbac;
    height: 30px;
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;

    .info {
      word-break: break-all;
      white-space: nowrap;

      position: relative;
      animation: rotateMove 5s linear infinite normal;
      -webkit-animation: rotateMove 5s linear infinite normal;

    }
  }

  @keyframes scroll {
    100%{
      // 需要滚动的总高度
      top: -300px;
    }
  }

  .list-content{
    position: relative;
    background: #a4ffcc;
    height: 150px;
    width: 200px;
    margin: 30px auto 30px;
    overflow: hidden;


    .scroll-list{
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      animation: scroll 5s linear infinite normal;

      div{
        width: 100%;
        height: 30px;
        background: #1ea7ff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        &:nth-child(2n){
          background: #18d9f8;
        }
      }
    }
  }


}
</style>